<template>
  <div class="Search_history">
    <ul>
        <!-- <li>
            <i></i>
            <div class="msg_box">
                <p>法兰西多士</p>
                <i></i>
            </div>
        </li>
         <li>
            <i></i>
            <div class="msg_box">
                <p>Let Me Know</p>
                <i></i>
            </div>
        </li> -->
    </ul>
  </div>
</template>

<script>

export default {
  name: "Search_history",
};
</script>
<style lang="less" scoped>
.Search_history {
    ul {
        li {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 45px;
            > i {
                margin: 0 10px;
                width: 15px;
                height: 15px;
                background: url() no-repeat;
            }
            .msg_box {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                p {
                    margin-right: 10px;
                    flex: 1;
                    font-size: 14px;
                    max-width: 300px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-break: normal;
                }
                i {
                    width: 32px;
                    height: 45px;
                    background: url() no-repeat;
                    background-size: 12px;
                    background-position: left center;

                }
            }
        }
    }
}
</style>